<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>菜单管理</title>
    <script th:replace="common/head::static"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            菜单树形列表
        </div>
        <button hidden="hidden" id="sysMenuSearchBtn"></button>
        <div class="layui-card-body">
            <div id="layuiTreeSysMenu"></div>
        </div>
    </div>
</div>

<script th:src="@{/common/js/common.js}"></script>
<script th:inline="javascript">
    layui.use(['tree', 'form'], function () {
        const $ = layui.jquery, tree = layui.tree;

        Common.ajaxGetNoParams(ctx + '/sysMenu/findAll', function (res) {
            if (res.value === 200) {
                tree.render({
                    elem: '#layuiTreeSysMenu'
                    , data: res.data
                    , id: 'layuiTreeSysMenu'
                    , accordion: true
                    , edit: ['add', 'del']
                    , click: function(obj){
                        Common.openFrame('/sysMenu/toUpdate/' + obj.data.id, '编辑菜单');
                    }
                    , operate: function (obj) {
                        var type = obj.type;
                        if (type === 'add') {
                            Common.openFrame('/sysMenu/toSave/' + obj.data.id, '新增菜单');
                        } else if (type === 'del') {
                            Common.ajaxDeleteNoParams(ctx + '/sysMenu/delete/' + obj.data.id, function (res) {
                                if (res.value === 200) {
                                    layer.msg(res.message, {icon: 1, time: 1000}, function () {
                                        layuiTreeReload();
                                    });
                                } else {
                                    // layui使用的坑 data 返回的是一个object对象,而layui.alert()和layui.msg()并不能传入object类型
                                    layer.msg(JSON.stringify(res.data), {icon: 2, time: 2000}, function () {
                                        layuiTreeReload();
                                    });
                                }
                            });
                        }
                    }
                });
            }
        });
        $('#sysMenuSearchBtn').on('click', function () {
            layuiTreeReload();
        });
        function layuiTreeReload() {
            Common.ajaxGetNoParams(ctx + '/sysMenu/findAll', function (res) {
                if (res.value === 200) {
                    tree.reload('layuiTreeSysMenu', {
                        data: res.data
                    });
                }
            });
        }

    });

</script>
</body>
</html>